import './index.scss'
import { Link } from 'react-router-dom'
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Select,
  Modal,
  DatePicker,
  Table,
  Tag,
  Space,
  message,
} from 'antd'
import { ExclamationCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { Component, createRef } from 'react'
import { http } from '../../utils'
import defaultImage from '../../assets/images/defaultImage.png'
const { confirm } = Modal
const { Option } = Select
const { RangePicker } = DatePicker
const articleState = {
  0: { color: 'gold', text: '草稿' },
  1: { color: 'lime', text: '待审核' },
  2: { color: 'green', text: '审核通过' },
  3: { color: 'red', text: '审核失败' },
}
class ArticleList extends Component {
  state = {
    channelList: [],
    //文章列表
    article: {},
  }

  //添加一个属性，用户获取Form实例
  formRef = createRef()
  //   表格配置
  columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render: data => {
        return <img width={200} height={150} src={data.images[0] || defaultImage} alt="" />
        // const {type,images}=data
        // if(type===0){
        //     return <img width={200} height={150} src={defaultImage} alt="" />
        // }
        // return <img  width={200} height={150} src={images[0]} alt="" />
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: status => {
        const curData = articleState[status]
        return <Tag color={curData.color}>{curData.text}</Tag>
      },
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      render: data => {
        return (
          <Space size="large">
            <Link to={`/home/publish?id=${data.id}`}>
            <Button type="primary" shape="circle" icon={<EditOutlined />} />
            </Link>
            <Button
              type="primary"
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => {
                this.deleteArticle(data.id)
              }}
            />
          </Space>
        )
      },
    },
  ]
  //删除文章方法
  deleteArticle = id => {
    // console.log(id);
    confirm({
      title: '温馨提示',
      icon: <ExclamationCircleOutlined />,
      content: '是否永久删除文章？',
      // 注意：此处需要使用箭头函数，否则会有this指向问题，this会变成undefined
      onOk: async () => {
        const res = await http.delete(`/mp/articles/${id}`)
        if (res.data.message === 'OK') {
          message.success('删除成功', 0.3)
          this.getList({
            ...this.queryParams,

            //给page设置默认值，如果没有切换分页，就获取第一页的数据
            page: this.page || 1,
          })
        }
      },
      // onCancel() {
      //   console.log('Cancel');
      // },
    })
  }

  componentDidMount() {
    this.getChannelList()
    this.getArticleList()
  }
  //封装专门用来获取文章列表数据的方法
  //params={} 表示默认参数，调用该方法没传参就为默认参数，传参就用传入参数
  async getList(params = {}) {
    const res = await http.get('/mp/articles', {
      params,
    })

    this.setState({
      article: res.data.data,
    })
  }

  //封装一个用来实现格式化Form表单中的数据
  formatValues(values) {
    const { status, channel_id, data } = values
    const queryParams = {}
    if (status !== -1) {
      queryParams.status = status
    }
    //处理频道
    if (channel_id) {
      queryParams.channel_id = channel_id
    }
    //处理日期
    //data[0]  是Moment类型，需要转化为字符串，才能作为接口参数
    if (data) {
      //获取一天开始时间
      const begin_pubdate = data[0].startOf('day').format('YYYY-MM-DD HH:mm:ss')
      // 获取一天结束时间
      const end_pubdate = data[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')

      queryParams.begin_pubdate = begin_pubdate
      queryParams.end_pubdate = end_pubdate
    }
    //将我们格式化好的数据，作为方法的返回值返回，调用该方法就可以通过返回值来拿到格式化好的数据
    return queryParams
  }
  async getChannelList() {
    const res = await http.get('/channels')
    const { channels } = res.data.data
    // console.log(channels);
    this.setState({
      channelList: channels,
    })
  }
  //获取文章列表数据
  async getArticleList() {
    // const res = await http.get('/mp/articles')
    // // console.log('123', res)
    // this.setState({
    //   article: res.data.data,
    // })
    this.getList()
  }
  //分页获取文章列表数据
  changePage = (page, pageSize) => {
    // const values = this.formRef.current.getFieldsValue()
    // 调用方法通过返回值拿到格式化好的数据
    // const queryParams = this.formatValues(values)
    // this.query(values)
    // const res = await http.get('/mp/articles', {
    //   params: {
    //     page,
    //     per_page: pageSize,
    //   },
    // })

    // this.setState({
    //   article: res.data.data,
    // })
    const params = {
      ...this.queryParams,
      page,
      per_page: pageSize,
    }
    // 将当前页存到this中，其他方法就可以拿到page
    this.page = page
    this.getList(params)
  }
  //查询文章列表
  //values就是表单中Form.Item的值
  query = async values => {
    //     const { status,channel_id,data } = values
    //     const queryParams = {}
    //     if (status !== -1) {
    //       queryParams.status = status
    //     }
    //     //处理频道
    //     if(channel_id){
    //         queryParams.channel_id=channel_id
    //     }
    //     //处理日期
    //     //data[0]  是Moment类型，需要转化为字符串，才能作为接口参数
    //     if(data){
    // //获取一天开始时间
    // const begin_pubdate=data[0].startOf('day').format('YYYY-MM-DD HH:mm:ss')
    // // 获取一天结束时间
    // const end_pubdate=data[1].endOf('day').format('YYYY-MM-DD HH:mm:ss')

    // queryParams.begin_pubdate=begin_pubdate
    // queryParams.end_pubdate=end_pubdate

    //     }
    const queryParams = this.formatValues(values)
    //每次查询都从第一页开始
    // queryParams.page=1

    //注意：不要忘记更新筛选拿到的数据
    this.queryParams = queryParams

    // 将组装好的查询参数添加到this中，在其他方法中也可以通过this来获取到这个参数

    // this.queryParams=queryParams
    // const res = await http.get('/mp/articles', {
    //     params:queryParams
    //   })

    //   this.setState({
    //     article: res.data.data,
    //   })
    this.getList(queryParams)
  }
  render() {
    const {
      channelList,
      article: { results, total_count, per_page, page },
    } = this.state

    return (
      <div className="list">
        <Card
          title={
            <Breadcrumb separator=">">
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>内容管理</Breadcrumb.Item>
            </Breadcrumb>
          }
        >
          <Form
            name="basic"
            initialValues={{ status: -1 }}
            onFinish={this.query}
            // 注意：如果将ref传递给一个组件，获取到的就是当前组件的实例，此时就可以通过这个ref来调用组件的实例方法
            // ref={this.formRef}
          >
            <Form.Item label="状态" name="status" rules={[]}>
              <Radio.Group>
                <Radio value={-1}>全部</Radio>
                <Radio value={0}>草稿</Radio>
                <Radio value={1}>待审核</Radio>
                <Radio value={2}>审核通过</Radio>
                <Radio value={3}>审核失败</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item label="频道" name="channel_id" rules={[]}>
              <Select placeholder="请选择文章频道" style={{ width: 200 }}>
                {channelList.map(item => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item label="日期" name="data" rules={[]}>
              <RangePicker />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                筛选
              </Button>
            </Form.Item>
          </Form>
        </Card>
        {/* 表格 */}
        <Card title={`根据筛选条件共查询到 ${total_count} 条结果`}></Card>
        {/*  rowKey 告诉表格组件 使用数据中的某一属性作为key */}
        <Table
          columns={this.columns}
          dataSource={results}
          rowKey="id"
          pagination={{
            position: ['bottomCenter'],
            total: total_count,
            pageSize: per_page,
            current: page,
            onChange: this.changePage,
          }}
        />
      </div>
    )
  }
}
export default ArticleList
